a laboratory-white canvas, ultra-thin lowercase type, crisp 1px dark hairlines, and a single signal blue — flat, rectilinear, and almost completely shadowless.
set in te-20 (teenage engineering's proprietary grotesque), shown here in work sans — the nearest free substitute with true thin/light weights. hierarchy is built from weight and size, never tracking; everything stays lowercase.
product tiles are flat: a white media block, a 1px hairline, and a lowercase name and price beneath. no shadow, no rounding, no hover lift — just the line.
spacing rides an 8px base scaled into large, breathing steps. whitespace is the primary layout material.
shape is binary — everything is square (0) except a few circular icon buttons (full). there is no soft mid-radius in the system.
teenage engineering casts no shadows at all. depth is expressed by line and by colour field, not by blur.
| name | width | key changes |
|---|---|---|
| mobile | < 768px | single column; the thin nav collapses to a menu control; type scales down fluidly. |
| tablet | 768–1023px | two-column product grids; nav still condensed. |
| laptop | 1024–1279px | up to four-column grids; the full lowercase nav row is visible. |
| desktop | ≥ 1280px | wide margins; type and grid scale with viewport width rather than snapping. |
fluid, not breakpoint-snapped. sizes are tied to viewport width (vw), which is why the live site's computed font sizes come back fractional (e.g. 23.25px). the hairline-and-whitespace structure holds at every width because it depends on rules and spacing, not on chrome that needs re-tuning per breakpoint.
teenage engineering's live site has no pricing page; this demonstrates the tier pattern in their flat, hairline-ruled style.
order history, ruled by hairlines on the off-white canvas.
| id | product | price | status | when |
|---|---|---|---|---|
| #op1f-2291 | op–1 field | $1,999 | shipped | jun 24 |
| #ep133-8841 | ep–133 k.o. ii | $299 | processing | jun 26 |
| #tx6-1182 | tx–6 | $1,199 | shipped | jun 20 |
| #tp7-5520 | tp–7 | $1,499 | delivered | jun 14 |
| #po33-9907 | po–33 k.o! | $89 | processing | jun 27 |
flat cards, hard corners, 1px dark inputs, lowercase labels.